 <template>
  <div>
    <div class="floating-ball" @click="openDialog">
      <img src="@/assets/logo/logo.png" alt="AI Assistant" class="logo" />
    </div>
    <AIAssistantDialog ref="aiDialog" />

  </div>
</template>

<script setup>
import { ref } from 'vue';
import AIAssistantDialog from '@/components/AIAssistantDialog/index.vue';

const aiDialog = ref(null);
function openDialog() {
  aiDialog.value.openDialog();
}
// const openDialog = () => {
//   const sampleMarkdown = '# Hello, World!\n\nThis is a **markdown** example.';
//   dialogComponent.value.open(sampleMarkdown);
  
// };
</script>

<style scoped>
.floating-ball {
  position: fixed;
  bottom: 50px;
  right: 50px;
  width: 50px;
  height: 50px;
  background-color: #fff;
  border-radius: 50%;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
  z-index: 9999; /* 确保悬浮球在所有内容之上 */
}

.logo {
  width: 30px;
  height: 30px;
}
</style>